﻿<template>
    <el-tabs v-model="warehouseId" style="margin-left: 20px;" class="demo-tabs">
        <el-tab-pane :label="item.warehouseName" v-for="(item,index) in warehouses" :key="index" :name="item.warehouseId">
            <el-tabs tab-position="left" style="height: 200px" class="demo-tabs">
                <el-tab-pane :label="item.warehouseName" v-for="(item,index) in warehouses" :key="index"></el-tab-pane>
            </el-tabs>
        </el-tab-pane>
    </el-tabs>
    <Suspense>
        <template #default>
            <keep-alive>
                <component :is="activeComponent" />
            </keep-alive>
        </template>
        <template #fallback>
            <el-skeleton :rows="3" />
        </template>
    </Suspense>
</template>
  
<script>
import { defineAsyncComponent } from "vue";
export default {
    name: "purchaseOrder",
    components: {
         order: defineAsyncComponent(() => import("./index")),
         //refundOrder: defineAsyncComponent(() => import("./refund")),
    },
    data() {
        return {
            activeName: "order", // 初始显示的标签页名称应该对应el-tab-pane的name属性
            activeComponent: "order", // 初始显示的组件名称
            refundOrderQty: 0,
            timer: null, // 用于存储定时器ID
            warehouses: [],
            warehouseId: 0,
            inStockType:[{inStockType:4,inStockTypeDesc:"采购入库"},{inStockType:5,inStockTypeDesc:"赠送入库"},{inStockType:3,inStockTypeDesc:"调拨入库"}],
            outStockType:[{outStockType:8,outStockTypeDesc:"调拨出库"}],
            btInStockType:[{inStockType:3,inStockTypeDesc:"调拨入库"},{inStockType:90,inStockTypeDesc:"寄存过期充公"},{inStockType:91,inStockTypeDesc:"客遗回收充公"},{inStockType:92,inStockTypeDesc:"盘盈入库"}],
            btOutStockType:[{outStockType:0,outStockTypeDesc:"赠送出库"},{outStockType:99,outStockTypeDesc:"售卖出库"},{outStockType:90,outStockTypeDesc:"盘亏出库"}],
        };
    },
    methods: {
        handleClick(tab, event) {
            this.$nextTick(() => {
                // 处理标签页点击事件
                console.log(tab.props.name); // 输出当前标签页的名称
                this.activeComponent = tab.props.name;
            });
        },
        async getWarehouse() {
            try {
                var returnValue = await this.$API.auth.GetProcessApi.get(
                    "warehouse/org-list",
                    {}
                );
                if (returnValue.status == 200) {
                    this.warehouses = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        this.getWarehouse();
    },
};
</script> 
<style>
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}
</style>